<template>
  <div>
    <el-card>
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="add()" v-if="$hasBP('bnt.sysMenu.add')">添 加</el-button>
    </el-card>
    <!-- 工具条 -->
    
    <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="name" label="菜单名称" width="140" align="center"> </el-table-column>
    <el-table-column prop="perms" label="权限标识" width="200" > </el-table-column>
    <el-table-column prop="path" label="路由地址" width="120" align="center"></el-table-column>
    <el-table-column prop="component" label="组件路径" width="200" align="center"></el-table-column>
    <el-table-column label="图标" align="center">
      <template slot-scope="scope">
        <i :class="scope.row.icon"></i>
      </template>
    </el-table-column>
    <el-table-column prop="sortValue" label="排序" width="100" align="center"></el-table-column>
    <el-table-column prop="status" label="状态" width="100" align="center">
      <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status === 1" disabled>
          </el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="description" label="描述" width="200" align="center"></el-table-column>
    <el-table-column prop="createTime" label="创建时间"  width="180" sortable :formatter="dateFormat"> </el-table-column>
    <el-table-column prop="updateTime" label="修改时间" width="180" sortable :formatter="dateFormat"> </el-table-column>
    <el-table-column label="操作" width="180" align="center" fixed="right" v-if="$hasBP('bnt.sysMenu.add') &&$hasBP('bnt.sysMenu.update')&&$hasBP('bnt.sysMenu.remove')">
        <template slot-scope="scope">
          <span style="font-size: 8px;color: #429ec9;cursor: pointer;" @click="add(scope.row)" v-if="scope.row.type !== 2 && $hasBP('bnt.sysMenu.add')">添加</span>
          <span style="font-size: 8px;color: #429ec9;margin-left: 10px;cursor: pointer;" @click="edit(scope.row)" v-if="$hasBP('bnt.sysMenu.update')">修改</span>
          <span style="font-size: 8px;color: #429ec9;margin-left: 10px;cursor: pointer;" @click="removeById(scope.row.id)" v-if="$hasBP('bnt.sysMenu.remove') && scope.row.children.length == 0">删除</span>
          <!-- <el-button type="primary" v-if="scope.row.type !== 2 && $hasBP('bnt.sysMenu.add')" icon="el-icon-plus" size="mini" @click="add(scope.row)"  title="添加下级节点" ></el-button> -->
          <!-- <el-button type="warning" icon="el-icon-edit" size="mini" @click="edit(scope.row)" title="修改" v-if="$hasBP('bnt.sysMenu.update')"/> -->
          <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.id)" title="删除" :disabled="scope.row.children.length > 0" v-if="$hasBP('bnt.sysMenu.remove')"/> -->
        </template>
      </el-table-column>
  </el-table>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="500px" top="30px" @close="resetForm('sysMenu')">
    <el-form :model="sysMenu" ref="sysMenu" :rules="rules">
      <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="sysMenu.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单类别" :label-width="formLabelWidth">
        <el-radio-group v-model="typeRadio" @input="typeRadioChange()" disabled >
          <el-radio :label=0>目录</el-radio>
          <el-radio :label=1>菜单</el-radio>
          <el-radio :label=2>功能</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" :label-width="formLabelWidth" v-if="sysMenu.type != 0">
        <el-input v-model="sysMenu.parentName" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" v-if="sysMenu.type === 1">
        <el-input v-model="sysMenu.path" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图标" :label-width="formLabelWidth" prop="icon" v-if="sysMenu.type !== 2">
        <el-select v-model="sysMenu.icon" clearable placeholder="请选择">
          <el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
          <span style="float: left;">
            <i :class="item.class"></i>  <!-- 如果动态显示图标，这里添加判断 -->
          </span>
          <span style="padding-left: 6px;">{{ item.class }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限标识" :label-width="formLabelWidth" v-if="sysMenu.type === 2">
        <el-input v-model="sysMenu.perms" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="sysMenu.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="排序号" :label-width="formLabelWidth">
        <el-input v-model="sysMenu.sortValue" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="sysMenu.description" autocomplete="off" type="textarea" :rows="3"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate('sysMenu')">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import sysMenuApi from '@/api/system/sysMenu'
import moment from "moment"
export default {
  data(){
    return{
      tableData:[],
      dialogTitle: '',
      dialogFormVisible: false,
      formLabelWidth: '100px',
      formTitle: '',
      sysMenu:{
        name:'',
      },
      typeRadio: 1,
      options: [{
          value: 0,
          label: '目录'
        }, {
          value: 1,
          label: '菜单'
        }, {
          value: 2,
          label: '功能'
        }],
        value: '',
        rules:{
          name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
            { max: 20, message: '长度在 20个字符之内', trigger: 'blur' }
          ]
        },
        iconList: [
          {
            class: "el-icon-s-tools",
          },
          {
            class: "el-icon-s-custom",
          },
          {
            class: "el-icon-setting",
          },
          {
            class: "el-icon-user-solid",
          },
          {
            class: "el-icon-s-help",
          },
          {
            class: "el-icon-phone",
          },
          {
            class: "el-icon-s-unfold",
          },
          {
            class: "el-icon-s-operation",
          },
          {
            class: "el-icon-more-outline",
          },
          {
            class: "el-icon-s-check",
          },
          {
            class: "el-icon-tickets",
          },
          {
            class: "el-icon-s-goods",
          },
          {
            class: "el-icon-document-remove",
          },
          {
            class: "el-icon-warning",
          },
          {
            class: "el-icon-warning-outline",
          },
          {
            class: "el-icon-question",
          },
          {
            class: "el-icon-info",
          }
        ]
    }
  },
  created(){
    //页面渲染之前
    this.fetchData();
  },
  methods:{
    /*日期处理*/
    dateFormat:function(row,column){
      var date = row[column.property];
      if(date === undefined){
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    removeById(id){
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sysMenuApi.removeMenuById(id)
          .then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新
            this.fetchData()
          })
        });
    },
    add(row){
      this.dialogTitle= "添加下级节点"
      this.dialogFormVisible = true
      if(row){
        this.sysMenu.parentId = row.id
        console.log(row);
        this.sysMenu.parentName = row.name
        if(row.type===0){
          this.typeRadio = 1
          this.sysMenu.type = 1
        }else if(row.type === 1){
          this.sysMenu.type = 2
          this.typeRadio = 2
        }
      }else{
        this.typeRadio = 0
        this.sysMenu.parentName = ''
        this.dialogTitle= "添加目录节点"
        this.sysMenu.type = 0
        this.sysMenu.component = "Layout"
        this.sysMenu.parentId = 0
      }
    },
    //编辑
    async edit(row) {
      this.dialogTitle = '修改菜单'
      this.dialogFormVisible = true
      await sysMenuApi.getMenuById(row.id)
      .then(response =>{
        console.log(response);
        this.sysMenu = response.data
        
      })
      if(row.type != 0){
        sysMenuApi.getParentMenuByParentId(row.parentId)
        .then(response =>{
          this.$set(this.sysMenu,'parentName',response.data.name)
          console.log(response.data.name);
          // this.sysMenu.parentName = response.data.name
        })
      }
      if(row.type === 0){
        this.typeRadio = 0
      }else if(row.type === 1){
        this.typeRadio = 1
      }else if(row.type === 2){
        this.typeRadio = 2
      }
    },
    saveOrUpdate(sysMenu){
      
      this.$refs[sysMenu].validate(valid => {
        if (valid) {
          if(this.sysMenu.id){ 
            sysMenuApi.updateMenu(this.sysMenu)
            .then(response =>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.dialogFormVisible = false
              //刷新
              this.fetchData()
            })
          }else{
            console.log(this.sysMenu);
            sysMenuApi.saveMenu(this.sysMenu)
            .then(response =>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.dialogFormVisible = false
              //刷新
              this.fetchData()
            })
          }
        }
      })

      
      
      
    },
    update(){
      console.log(this.sysMenu);
    },
    resetForm(sysMenu){
      this.$refs[sysMenu].resetFields();
      this.sysMenu= {}
      this.dialogFormVisible = false
    },
    typeRadioChange(){
      console.log(this.typeRadio);
    },
    fetchData() {
      sysMenuApi
        .findNodes()
        .then((response) => {
          this.tableData = response.data;
          console.log(response);
        });
    },
    
  }

}
</script>

<style>

</style>